<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>上传图片插件</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
		<!--ios是否运行创建快捷启动方式-->
		<meta content="yes" name="apple-mobile-web-app-capable">
		<!--ios顶部通知栏的样式 黑色-->
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<!--遇到数字不让转成电话号码格式-->
		<meta content="telephone=no" name="format-detection">
		<link href="css/material_new_photo.css" type="text/css" rel="stylesheet" />
		<link href="css/material_new_photo_common.css" type="text/css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="common/css/base.css" />
		<script type="text/javascript" src="js/vue.js"></script>
		<script src="js/remstyle.js"></script>
		<script src="js/config.js"></script>
		<style>
			/*大层*/
			
			.container {
				width: 80%;
				margin: 0 auto;
			}
			/*瀑布流层*/
			
			.waterfall {
				-moz-column-count: 2;
				/* Firefox */
				-webkit-column-count: 2;
				/* Safari 和 Chrome */
				column-count: 2;
				-moz-column-gap: 1em;
				-webkit-column-gap: 1em;
				column-gap: 1em;
			}
			/*一个内容层*/
			
			.item {
				position: relative;
				/*padding: 1em;
				margin: 0 0 1em 0;*/
				-moz-page-break-inside: avoid;
				-webkit-column-break-inside: avoid;
				break-inside: avoid;
				display: none;
			}
			
			.up-img {
				width: 100%;
				height: auto;
				/*margin-bottom: 10px;*/
			}
			.file{
				border: 1px solid red;
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
			}
			.up-section img{
				border-radius: 0.1rem;
			}
		</style>
	</head>

	<body>
<!--顶部-->
		<div class="top">
			<div class="top-one" onclick="javascript :history.back(-1);">
				<span><img src="img_page/right.png"/></span>
			</div>
			<div class="point" id="my_photo_del">
				<!--<img src="img_page/3point.png" />-->
				管理
			</div>
		</div>
		<!--内容-->
		<div class="img-box full">
			<section class=" img-section">
				<!--<p class="up-p">作品图片：<span class="up-span">最多可以上传5张图片，马上上传</span></p>-->
				<div class="waterfall z_photo upimg-div clear">
					<section class="z_file fl item">
						<img src="img_page/a11.png" class="add-img">
						<input type="file" name="file" id="file" class="file" value=""   />
					</section>
					<section class="up-section fl" v-for="item in up_img" @click="choose_myphoto(item.img_url)">
						<img :src="item.img_url" />
					</section>
				</div>
			</section>
			
		</div>
		<!--<aside class="mask works-mask">
			<div class="mask-content">
				<p class="del-p ">您确定要删除作品图片吗？</p>
				<p class="check-p"><span class="del-com wsdel-ok">确定</span><span class="wsdel-no">取消</span></p>
			</div>
		</aside>-->

		<script src="js/jquery.js"></script>
		<script src="js/imgUp.js"></script>

	</body>
<script>
	
//管理跳转删除页面
$("#my_photo_del").on("click",function(){
	window.location.href="material_photo_manage.html?c_user_id="+c_user_id
})
	var up_img=new Vue({
		el:'.waterfall',
		data:{
			up_img:[
//			{
//				img:"img/v_back.png"
//			},
//			{
//				img:"img/v_back.png"
//			},
//			{
//				img:"img/v_back.png"
//			},
//			{
//				img:"img/v_back.png"
//			}
			
			]
		},
		created: function() {
					this.getList();
				},
				methods: {
					getList: function() {
						console.log("11111");
						var that = this;
						$.ajax({
							type: "get",
							url: v_url + "/wechat/material/getUserPhoto",
							data: {
c_user_id:c_user_id
							},
							async: true,
							success: function(res) {
								var list = res.data;
								console.log(list)
								var new_up_img = [];
								for(var i = 0; i < list.length; i++) {
									new_up_img.push(list[i]);
									var photo_time = list[i]["create_time"];
									var dateee = new Date(photo_time).toJSON();
									var date = new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
									list[i]["create_time"] = date;

								}
								console.log(v_param)

								that.up_img = new_up_img;

								//console.log(that.material_list);
							}
						});

					},
					choose_myphoto: function(img_url) {
						var aaaa = window.location.href;
						var bbbb = aaaa.substring(aaaa.indexOf('addToTo=') + 8,aaaa.length);
						if(v_param) {
							console.log(222)
							img_url = "<p><img src='" + img_url + "'/></p>"
							$.ajax({
								type: "get",
								url: v_url+"/wechat/singlepage/saveContent",
								data: {
									id: v_param,
									content: img_url,
									c_user_id:c_user_id
								},
								async: false,
								success: function(res) {
									if(res.code == 200) {
										console.log("保存成功")
										window.location.href = bbbb;
									} else {
										console.log("保存失败")
									}
								}
							});
						}else if(v_page_id){
							console.log(44444)
							$.ajax({
								type: "get",
								url: v_url+"/wechat/singlepage/savePage",
								data: {
									id: v_page_id,
									img_url: img_url,
									c_user_id:c_user_id
								},
								async: false,
								success: function(res) {
									if(res.code == 200) {
										console.log("保存成功")
										window.location.href = bbbb;
									} else {
										console.log("保存失败")
									}
								}
							});
						}
						//console.log(id)
					}
				}
	})
</script>
</html>